<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>-uu-box-reflect</title>
<style type="text/css">
@import url(../../README.css);
body {
  width: 600px;
}
.view {
  padding: 20px;
}
.gradation-box {
  border: 11px solid rgb(204, 204, 204);
  -uu-box-shadow: skyblue 0px 3px 20px;
  -uu-background-image:
    -uu-gradient(linear, left top, left bottom, from(white),
                     color-stop(0.1, white), to(rgb(205, 221, 241)));
  -uu-border-radius: 5px;
  display: block;
  margin: 20px;
  height: 160px;
  padding: 10px;
  vertical-align: top;
  position: relative;
}
.gradation-box > * {
  margin-left: 80px;
}
.gradation-box > .view {
  margin-left: 0;
  display: block;
  float: left;
}
.reflect {
  -uu-box-reflect: below 0px
      -uu-gradient(linear, left top, left bottom, from(transparent),
                       color-stop(0.65, transparent), to(white));
}
.canvas-view {
  position: absolute;
  right: -30px;
  bottom: -30px;
}
h1 {
  color: blue;
  font-size: 36px;
  line-height: 1;
  font-family: Helvetica, sans-serif;
  margin-top: 20px;
  padding: 0;
  text-shadow: gray 5px 5px 5px;
  -uu-text-shadow: gray 5px 5px 5px;
}
html.ifie6 h1,
html.ifie7 h1 {
  width: 200px;
}

html.ifie6 .canvas-view {
  bottom: 60px;
}
</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script>
window.UUMETA_DEBUG = 1;
window.UUMETA_IMAGE_DIR = "../../img";
</script>
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuMeta.cdsl.js"></script>
<script src="../../../src/uuMeta.data.js"></script>
<script src="../../../src/uuMeta.event.resize.js"></script>
<script src="../../../src/uuMeta.normalize.js"></script>
<script src="../../../src/uuCodec.js"></script>
<script src="../../../src/uuToken.js"></script>
<script src="../../../src/uuImage.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyle.shadow.js"></script>
<script src="../../../src/uuStyle.opacity.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuCSSValidator.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS.ie.js"></script>
<script src="../../../src/uuAltCSS.imports.js"></script>
<script src="../../../src/uuAltCSS.cleanup.js"></script>
<script src="../../../src/uuAltCSS.calcspec.js"></script>
<script src="../../../src/uuAltCSS.boxeffect.js"></script>
<!--
<script src="../../uuAltCSS.js"></script>
 -->

<script>
function boot(type) {
  switch (type) {
  case 0x100: // DOMContentLoaded
  case 0x101: //
    break;
  case 0x200: // uuAltCSS.validate
  case 0x201: // uuAltCSS.revalidate
    break;
  }
  return;
}
function bloody() {
  var excssnode = uuQuery(".gradation-box");
  var h1 = uuQuery("h1");
  var grad = "-uu-gradient(linear, 0% 0%, 0% 100%, from(#870404), to(#EB0505), color-stop(0.5,#331F0B))";

  uuAltCSS.setExStyle(h1[0], "color", "#c00");
  uuAltCSS.setExStyle(h1[0], "-uu-text-shadow", "red 1px 20px 20px");

  uuAltCSS.setExStyle(excssnode[0], "border", "4px solid red");
  uuAltCSS.setExStyle(excssnode[0], "-uu-box-shadow", "red 1px 20px 20px");
  uuAltCSS.setExStyle(excssnode[0], "-uu-background-image", grad);
  uuAltCSS.setExStyle(excssnode[0], "-uu-border-radius", "5px 5px 40px 40px", 1); // redraw
}
function box_effect_toggle() {
  var excssnode = uuQuery(".gradation-box");
  var val = uuAltCSS.getExStyle(excssnode[0], "-uu-box-effect");

  if (val === "none") {
    uuAltCSS.setExStyle(excssnode[0], "-uu-box-effect", "auto", 1);
  } else {
    uuAltCSS.setExStyle(excssnode[0], "-uu-box-effect", "none", 1);
  }
}
function box_reflect_toggle() {
  var excssnode = uuQuery(".reflect");
  var val = uuAltCSS.getExStyle(excssnode[0], "-uu-box-effect");

  if (val === "none") {
    uuAltCSS.setExStyle(excssnode[0], "-uu-box-effect", "auto", 1);
  } else {
    uuAltCSS.setExStyle(excssnode[0], "-uu-box-effect", "none", 1);
  }
}

</script>

</head>
<body>
<h2>ExCSSNode</h2>
<input type="button" value="-uu-box-effect: none / auto [toggle]" onclick="box_effect_toggle()" />
<input type="button" value="bloody" onclick="bloody()" />
<h2>Reflection Image</h2>
<input type="button" value="-uu-box-effect: none / auto [toggle]" onclick="box_reflect_toggle()" />

<div class="view" id="toplayer">
  <div class="gradation-box">
    <div class="view">
      <img class="reflect" src="../../img/upapa.jpg" />
    </div>
    <h1>uuAltCSS.js</h1>
    <p class="link">
      <a href="http://code.google.com/p/uupaa-js-spinoff/">uupaa-js-spinoff project</a>
    </p>
  </div>
</div>


</body>
</html>
